<!--  -->
<template>
  <div class="mytodos">
    <!-- 标题开始 -->
    <div class="mytodos-header">
      <h1>todos</h1>
    </div>
    <!-- 标题结束 -->
    <!-- 内容开始 -->
    <div class="mytodos-content">
      <!-- 顶部开始 -->
      <div class="mytodos-content-top">
        <div
          :class="['content-top-left', { allchecked: allChecked }]"
          @click.stop="handleAllCheck"
        >
          >
        </div>
        <div class="content-top-right">
          <input
            type="text"
            @keyup.enter="saveTodo"
            v-model="inputVal"
            v-focus
          />
        </div>
      </div>
      <!-- 顶部结束 -->
      <!-- 中间列表开始 -->
      <div class="mytodos-content-mid">
        <div class="content-mid-list">
          <div
            class="mid-list-item"
            v-for="(item, index) in filterTodos"
            :key="item.id"
          >
            <div class="list-item-left">
              <input type="checkbox" name="" id="" v-model="item.status" />
            </div>
            <div
              :class="['list-item-mid', { completed: item.status }]"
              @dblclick="handleEditTodo(index)"
            >
              <span :class="['title', { hidden: edit_index === index }]">{{
                item.text
              }}</span>
              <input
                :class="[{ hidden: edit_index !== index }]"
                type="text"
                v-model="item.text"
                @blur="saveEditTodo"
              />
            </div>
            <div class="list-item-right" @click.stop="deleteTodo(index)">X</div>
          </div>
        </div>
      </div>
      <!-- 中间列表结束 -->
      <!-- 底部功能栏开始 -->
      <div class="mytodos-content-bottom">
        <div class="content-bottom-left">{{ remaining }} 项剩下</div>
        <div class="content-bottom-mid">
          <div
            @click.stop="handleItemClick('all')"
            :class="['mid-left', { active: activeTab === 'all' }]"
          >
            全部
          </div>
          <div
            @click.stop="handleItemClick('active')"
            :class="['mid-mid', { active: activeTab === 'active' }]"
          >
            激活
          </div>
          <div
            @click.stop="handleItemClick('completed')"
            :class="['mid-right', { active: activeTab === 'completed' }]"
          >
            完成
          </div>
        </div>
        <div class="content-bottom-right" @click="handleClearCompleted">
          清除已完成
        </div>
      </div>
      <!-- 底部功能栏结束 -->
    </div>
    <!-- 内容结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapGetters } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      edit_index: -1, // -1 表示没有编辑 0 正在编辑第0行
      inputVal: "",
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters(["filterTodos", "allChecked", "remaining","activeTab"]),
    // 过滤后的todos
  },
  //监控data中的数据变化
  watch: {
    // todos: {
    //   handler: function (newTodos) {
    //     localStorage.setItem("todos", JSON.stringify(newTodos));
    //   },
    //   deep: true,
    // },
  },
  //方法集合
  methods: {
    // 清除已完成
    handleClearCompleted: function () {
      // // 筛选出未完成 => todos
      // let activeTodos = this.todos.filter((v) => {
      //   // v.status => false
      //   return !v.status; // false => !false => true
      // });
      // this.todos = activeTodos;
      this.$store.commit("handleClearCompleted")
    },
    // 底部功能栏 筛选
    handleItemClick: function (activeTab) {
      this.$store.commit({
        type:"changeActiveTab",
        payload:{
          activeTab
        }
      })
    },
    // todo 编辑项 失焦
    saveEditTodo: function () {
      this.edit_index = -1;
    },
    // 双击编辑的逻辑
    handleEditTodo: function (index) {
      console.log("正在编辑", index, "行");
      this.edit_index = index;
    },
    // 删除todo逻辑
    deleteTodo: function (index) {
      // this.todos.splice(index, 1);
      this.$store.commit({
        type:"deletTodo",
        payload:{
          index:index
        }
      })
    },
    // 全选的逻辑
    handleAllCheck: function () {
      this.$store.commit("allCheck")
    },
    saveTodo: function () {
      if (!this.inputVal) {
        this.$message({
          message: "输入不能为空！",
          type: "warning",
        });
        return false;
      }
      this.$store.commit({
        type: "addTodo",
        payload: {
          text: this.inputVal,
          status: false,
          id: Date.now(),
        },
      });
      // this.todos.push({
      //   text: this.inputVal,
      //   status: false,
      //   id: Date.now(),
      // });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
  },
};
</script>
<style lang='less' scoped>
.hidden {
  display: none;
}
.show {
  display: block;
}
.mytodos {
  width: 50vw;
  margin: 0 auto;
  .mytodos-header {
    h1 {
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  }

  .mytodos-content {
    border: 1px solid #ddd;
    .mytodos-content-top {
      margin-top: 5px;
      padding: 5px;
      height: 30px;
      display: flex;
      .content-top-left {
        height: 30px;
        flex: 1;
        text-align: center;
        // transform: rotate(90deg);
      }
      .allchecked {
        color: red;
      }

      .content-top-right {
        height: 30px;
        flex: 8;
        input {
          height: 100%;
          width: 100%;
        }
      }
    }
    .mytodos-content-mid {
      .content-mid-list {
        .mid-list-item {
          height: 50px;
          display: flex;
          align-items: center;
          .list-item-left {
            display: flex;
            justify-content: center;
            flex: 1;
            input {
            }
          }

          .list-item-mid {
            flex: 8;
            .title {
            }
          }
          .completed {
            color: #ddd;
            text-decoration: line-through;
          }

          .list-item-right {
            visibility: hidden;
            display: flex;
            justify-content: center;
            flex: 1;
          }
        }
        .mid-list-item:hover {
          .list-item-right {
            visibility: visible;
            cursor: pointer;
            display: flex;
            justify-content: center;
            flex: 1;
          }
        }
      }
    }
    .mytodos-content-bottom {
      padding: 5px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .content-bottom-left {
      }

      .content-bottom-mid {
        display: flex;
        .active {
          border: 1px solid pink;
        }
        .mid-left {
          margin-right: 5px;
        }

        .mid-mid {
          margin-right: 5px;
        }

        .mid-right {
          margin-right: 5px;
        }
      }

      .content-bottom-right {
      }
    }
  }
}
</style>